<script setup>
import * as echarts from 'echarts';
import { getCharts } from '@/api/apis/home';
import { onMounted, reactive } from 'vue'
import vChart from 'vue-echarts'
//获取chartData 

// 折线图公共配置
const xOptions = reactive({
    // 图例文字颜色
    textStyle: {
        color: "#333",
    },
    legend: {
        data: []
    },
    grid: {
        left: "20%",
    },
    // 提示框
    tooltip: {
        trigger: "axis",
    },
    xAxis: {
        type: "category", // 类目轴
        data: [],
        axisLine: {
            lineStyle: {
                color: "#17b3a3",
            },
        },
        axisLabel: {
            interval: 0,
            color: "#333",
        },
    },
    yAxis: [
        {
            type: "value",
            axisLine: {
                lineStyle: {
                    color: "#17b3a3",
                },
            },
        },
    ],
    color: ["#2ec7c9", "#b6a2de", "#5ab1ef", "#ffb980", "#d87a80", "#8d98b3"],
    series: [],
})
const getchart = async () => {
    const res = await getCharts()

    const orderData = res.orderData;
    const dates = orderData.date;         // x轴：日期
    const rawData = orderData.data;       // 时间序列数据

    // 🔑 第一步：提取所有品牌名（key）
    const brands = Object.keys(rawData[0]); // ['苹果', '小米', '华为', 'oppo', 'vivo', '一加']

    // 📊 第二步：为每个品牌构造 series 数据
    const seriesData = brands.map(brand => {
        return {
            name: brand,           // 必须和 legend 一致
            type: 'line',
            data: rawData.map(dayData => dayData[brand]) // 取出该品牌每天的值
        };
    });

    // ✅ 第三步：更新配置
    xOptions.legend.data = brands;           // 图例显示品牌
    xOptions.xAxis.data = dates;             // x轴显示日期
    xOptions.series = seriesData;            // 核心：设置 series 数据！

}

onMounted(() => getchart())
</script>

<template>
    <el-card style="height: 280px;padding:0px; " shadow="hover">
        <v-chart class="chart" :option="xOptions" :autoresize="true" style="width: 100%; height: 280px"></v-chart>
    </el-card>
</template>

<style lang="less" scoped></style>